
<template>
  <div id="link">
    <div class="tablebox">
      <div style="float: right">
        <el-form ref="zoushiForm" :model="zoushiForm" label-width="120px">
          <el-form-item label="选择您的角色:">
            <el-select
              v-model="zoushiForm.isBuyer"
              placeholder="请选择您的角色"
              @change="switchTrade1"
            >
              <el-option label="买方" value="0" />
              <el-option label="卖方" value="1" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableTitle" style="margin-bottom: 12px">交易走势</div>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-header">
              <h4>撮合交易总量</h4>
            </div>
            <div class="card-body">
              <div style="width: 700px; height: 300px">
                <div id="simplebar1" style="width: 550px; height: 300px" />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div class="card">
            <div class="card-header">
              <h4>成交价情况</h4>
            </div>
            <div class="card-body">
              <div style="width: 700px; height: 300px">
                <div id="simplebar2" style="width: 550px; height: 300px" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="tablebox">
      <div style="float: right">
        <el-form ref="tradeForm" :model="tradeForm" label-width="120px">
          <el-form-item label="选择您的角色:">
            <el-select
              v-model="tradeForm.isBuyer"
              placeholder="请选择您的角色"
              @change="switchTrade(1)"
            >
              <el-option label="买方" value="0" />
              <el-option label="卖方" value="1" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableTitle">我的交易</div>
      <div id="linkB">
        <el-table :data="myTrade" style="width: 100%" stripe>
          <el-table-column
            v-if="tradeForm.isBuyer"
            prop="buyer"
            label="买方ID"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            v-else
            prop="seller"
            label="卖方ID"
            align="center"
            header-align="center"
            show-overflow-tooltip
          />
          <el-table-column
            prop="match_time"
            label="撮合时间"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="trade_time"
            label="交易时间"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="price"
            label="成交价/分"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="contract_elec"
            label="成交电量"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="output_elec"
            label="卖方实际出电量/千瓦时"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="use_elec"
            label="买方实际出电量/千瓦时"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="trade_state_name"
            label="交易状态"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="default_info"
            label="违约状态"
            align="center"
            header-align="center"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="showTradeDetail(scope.row.trade_id)"
                >区块信息</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationBox">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="switchTrade"
          :page-count="pageHelp.pages"
          :page-size="pageHelp.pageSize"
        />
      </div>
    </div>
    <!--所有交易详情开始 -->
    <el-dialog title="详情" :visible.sync="jiaoyidetaileVisible" width="600px">
      <div class="jiaoyilist">
        <ul>
          <li><span>交易记录:</span>{{ detaileData1.trade_id }}</li>
          <li><span>买方:</span>{{ detaileData1.buyer }}</li>
          <li><span>卖方:</span>{{ detaileData1.seller }}</li>
          <li><span>交易时间:</span>{{ detaileData1.trade_time }}</li>
          <li><span>交易价格:</span>{{ detaileData1.price }}</li>
          <li><span>合约电量:</span>{{ detaileData1.contract_elec }}</li>
          <li><span>买方实际用电量:</span>{{ detaileData1.use_elec }}</li>
          <li><span>卖方实际用电量:</span>{{ detaileData1.output_elec }}</li>
          <li><span>违约情况:</span>{{ detaileData1.default_id }}</li>
          <li><span>区块高度:</span>{{ detaileData1.block_height }}</li>
          <li><span>区块哈希值:</span>{{ detaileData1.block_hash }}</li>
          <li><span>父区块哈希值:</span>{{ detaileData1.block_pre_hash }}</li>
          <li>
            <span>买方电表ID:</span>{{ detaileData1.buyer_elec_meter_id }}
          </li>
          <li>
            <span>卖方电表ID:</span>{{ detaileData1.seller_elec_meter_id }}
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jiaoyidetaileVisible = false"
          >了解了</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getTradeDetail } from "@/api/link";
import {
  getBuyerTrading,
  getSellerTrading,
  getMyTradeEChart,
} from "@/api/userCenter";
export default {
  data() {
    return {
      jiaoyidetaileVisible: false,
      detaileVisible: false,
      detaileData1: [],
      zoushiForm: {
        isBuyer: "0",
      },
      tradeForm: {
        isBuyer: "0",
      },
      myTrade: [],
      state: {
        //创建响应式数据对象和相关数据
        id: 1,
        data1: [],
        data2: [],
        data3: [],
      },
      pageHelp: {
        pages: 1, // 总页
        pageSize: 10, // 每页显示个数
      },
    };
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart1 = this.$echarts.init(
        document.getElementById("simplebar1"),
        "dark"
      );
      const myChart2 = this.$echarts.init(
        document.getElementById("simplebar2"),
        "dark"
      );
      // 指定图表的配置项和数据
      const option1 = {
        backgroundColor: "",
        // title: {
        //   text: "撮合交易总量情况",
        //   left: "center",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {
              title: "另存为图片",
            },
          },
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: 14, // 更改坐标轴文字大小
                color: "#F8F8FF",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#F8F8FF", // 更改坐标轴颜色
              },
            },
            boundaryGap: true, //坐标轴最大项最小项两边是否留空位
            type: "category",
            data: Array.from(Array(24), (v, k) => k),
            axisTick: {
              alignWithLabel: true, //保证刻度线和标签对齐
            },
          },
        ],
        yAxis: [
          {
            name: "千瓦时",
            type: "value",
            color: "#F8F8FF",
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 14, // 更改坐标轴文字大小
                color: "#F8F8FF",
              },
            },
            //   axisLabel:{                 //坐标轴刻度标签的相关设置
            //     formatter: function (value, index) {            //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
            //         return value+"元";
            //     },
            // },
            axisLine: {
              lineStyle: {
                color: "#F8F8FF", // 更改坐标轴颜色
              },
            },
          },
        ],
        series: [
          {
            name: "撮合交易总量",
            data: this.state.data1,
            type: "bar",
            barWidth: "60%",
            color: "#00BFFF",
          },
        ],
      };
      // 指定图表的配置项和数据
      const option2 = {
        name: "元",
        backgroundColor: "",
        toolbox: {
          feature: {
            saveAsImage: { title: "另存为图片" },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["成交价", "发布价"],
          textStyle: {
            fontSize: 14,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              fontSize: 14, // 更改坐标轴文字大小
              color: "#F8F8FF",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF",
            },
          },
          boundaryGap: false,
          type: "category",
          data: Array.from(Array(24), (v, k) => k),
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "元",
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#F8F8FF", // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
            },
          },
          axisLine: {
            lineStyle: {
              color: "#F8F8FF", // 更改坐标轴颜色
            },
          },
        },
        series: [
          {
            name: "成交价",
            data: this.state.data2,
            type: "line",
            color: "#7FFFD4",
          },
          {
            name: "发布价",
            data: this.state.data3,
            type: "line",
            color: "#EE82EE",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      myChart2.setOption(option2);
    },
    showTradeDetail(trade_id) {
      this.jiaoyidetaileVisible = true;
      getTradeDetail(trade_id).then((res) => {
        this.detaileData1 = res.data;
      });
    },
    switchTrade(pageNum) {
      // 我的交易
      if (!localStorage.getItem("Token") || !localStorage.getItem("Name")) {
        return;
      }
      if (this.tradeForm.isBuyer == "0") {
        getBuyerTrading(pageNum, this.pageHelp.pageSize).then((res) => {
          this.pageHelp.pageSize = res.data.pageSize;
          this.pageHelp.pages = res.data.pages;
          this.myTrade = res.data.list;
        });
      } else {
        getSellerTrading(pageNum, this.pageHelp.pageSize).then((res) => {
          this.pageHelp.pageSize = res.data.pageSize;
          this.pageHelp.pages = res.data.pages;
          this.myTrade = res.data.list;
        });
      }
    },
    switchTrade1() {
      // 交易图表
      if (!localStorage.getItem("Token") || !localStorage.getItem("Name")) {
        return;
      }
      getMyTradeEChart(this.zoushiForm.isBuyer == "0").then((res) => {
        const data = res.data;
        for (var i = 0; i < 24; i++) {
          this.state.data1[i] = data[i].contract_elec;
          this.state.data2[i] = data[i].price;
          this.state.data3[i] = data[i].releasePrice;
        }
        this.drawChart();
      });
    },
  },
  mounted() {
    this.switchTrade(1);
    this.switchTrade1();
  },
};
</script>